$(function () {
    

    let query = {
        pagenum: 1, //是 int 页码值
        pagesize: 7, //是 int 每页显示多少条数据
        cate_id: '', //否 string 文章分类的 Id
        state: '' //否 string 文章的状态， 可选值有： 已发布、 草稿
    }
    let layer = layui.layer
    //需求1 : 展示文章列表
    initArticleList()
    //封装成函数,后面的分页/筛选/删除会用到
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: query
        }).then(function (res) {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            //console.log(res.data);
            //TODO:成功后,渲染
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(`
                <tr>
                <td>${ele.title}</td>
                <td>${ele.cate_name}</td>
                <td>${dateFormat(ele.pub_date)}</td>
                <td>${ele.state}</td>
                <td>
                    <a href="/article/art_edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">编辑</a>
                    <button type="button" data-id="${ele.Id}" class="layui-btn layui-btn-xs  layui-btn-danger btn-delete">删除</button>
                </td>
            </tr>
                `)
            });
            // 赋值 - 一定要写到foreach() 外面
            let str = arr.join('')
            $('tbody').empty().html(str)
           
            //赋值之后,做分页
            pageRender(res.data.total)
        })
    }

    //需求2 : 初始化文章分类(去发布文章中复制)
    let form = layui.form
    initArtCateList()

    function initArtCateList() {
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(function (res) {
            //console.log(res.data);
            //判断
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            //成功后渲染
            let arr = ['<option value="">请选择文章类别</option>']
            res.data.data.forEach(ele => {
                arr.push(`
             <option value="${ele.Id}">${ele.name}</option>
             `)
            })
            //赋值
            let str = arr.join('')
            $('[name=cate_id]').empty().html(str)
            //form表单同步渲染
            //有些时候，你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制（因为我们叫经典模块化框架，偷笑.gif） 但没有关系，你只需要执行 form.render(type, filter); 方法即可。
            form.render()
        })

    }
    //需求3:筛选
    $('#formSearch').on('submit', function (e) {
        e.preventDefault()
        //该分类和状态两个全局参数
        query.cate_id = $('[name=cate_id]').val()
        query.state = $('[name=state]').val()

        //重新调用文章列表初始化方法(不是文章分类列表!!!)
        initArticleList()
    })

    //需求4: 分页
    let laypage = layui.laypage

    function pageRender(total) {
        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号  
            count: total, //数据总数，从服务端得到
            limit: query.pagesize,
            curr: query.pagenum,
            //配置定制化的分页
            layout: ['count', 'limit', 'prev', 'page', 'next'],
            limits: [2, 3, 5, 10],
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    //do something
                    //修改参数,重新渲染页面
                    query.pagenum = obj.curr
                    query.pagesize = obj.limit
                    //重新渲染
                    initArticleList()
                }
            }
        })
    }

    //需求5 : 删除
    $('tbody').on('click','.btn-delete',function(){
        //在弹出层的外面获取id,弹出层里面this就改变
        let id = $(this).attr('data-id')
        //alert(id)
        //弹出层
        layer.confirm('是否确认删除?',{icon:3, title: '提示'},function(index){
             //do something
             axios({
                 method:'GET',
                 //:去掉  /保留
                 url: '/my/article/delete/' + id
             }).then(function(res){
                 if(res.data.status !==0){
                  return layer.msg(res.data.message)
                 }
                 //成功提示
                 layer.msg('删除文字成功^^')
                 //如果当前页只剩一条数据,而且删除成功了,那么query.pagenum 自减
                // console.log($('.btn-delete').length)
                $('.btn-delete').length == 1 &&  query.pagenum >= 2 &&  query.pagenum --
                   // query.pagenum --
                

                 //重新渲染页面
                 initArticleList()
             })
             layer.close(index)
        })
    })

})